<template>
    <div class="filter-condition">

        <!--        <div v-for="(v,k,i) in cascadeColMeta" :key="k">-->
        <!--            {{k}},{{v}},{{i}}-->
        <span v-for="(colName,colIndex) in cascadeColMeta[catalog]" :key="colIndex">
<!--                {{colName}},{{colIndexes[colName]}}-->
                <span class="label">{{colName}}:</span>
                <el-select size="mini" v-model="filter[colIndex]" @change="changeCascadeSelection(colIndex)">
                    <el-option :value="null" label="(无)"></el-option>
                    <el-option v-for="index in cascadeDataGroup[colIndex]" :key="index" :label="lookupDic(index)"
                               :value="index"></el-option>
                </el-select>
            <!--                <el-select v-else size="mini" v-model="filter[colName]">-->
            <!--                    <el-option :value="null" label="(无)"></el-option>-->
            <!--                    <el-option v-for="index in getCascadeValues({name:colName,parentValue:filter[colIndex-1]})"-->
            <!--                               :key="index" :label="index"-->
            <!--                               :value="index"></el-option>-->
            <!--                </el-select>-->
            </span>
        <!--        </div>-->
        <!--        <span class="label">{{filter.name}}:</span>-->
        <!--        <el-select class="value" v-model="filter.value" size="mini" @change="conditionChange">-->
        <!--            <el-option :value="null" label="(无)"></el-option>-->
        <!--            <el-option v-for="index in colIndexes[filter.name]" :key="index" :label="index" :value="index"></el-option>-->
        <!--        </el-select>-->
        <!--        <el-button class="close" circle icon="el-icon-close" @click="removeFilter" size="mini"-->
        <!--                   type="danger"></el-button>-->
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';

    export default {
        name: "CascadeFilterCondition",
        props: {
            catalog: String,
        },
        data() {
            return {
                filter: {},
                cascadeDataGroup: {},
            }
        },
        computed: {
            resetFlag() {
                return this.$store.state.table2.resetFlag;
            },
            colIndexes() {
                return this.$store.state.table2.colIndexes;
            },
            cascadeColMeta() {
                return this.$store.state.table2.cascadeColMeta;
            },
            ...mapGetters(['getCascadeValues', 'lookupDic']),
        },
        created() {
            let names = this.cascadeColMeta[this.catalog];
            let firstColName = null;
            if (names && names.length > 0) {
                firstColName = names[0];
            }
            this.cascadeDataGroup[0] = this.colIndexes[firstColName];
            for (let i = 0; i < names.length; i++) {
                this.filter[i] = null;
            }
            this.cascadeDataGroup = Object.assign({}, this.cascadeDataGroup);
        },
        watch: {
            resetFlag: function (val) {
                if (val) {
                    let names = this.cascadeColMeta[this.catalog];
                    let firstColName = null;
                    if (names && names.length > 0) {
                        firstColName = names[0];
                    }
                    this.cascadeDataGroup[0] = this.colIndexes[firstColName];
                    for (let i = 0; i < names.length; i++) {
                        this.filter[i] = null;
                    }
                    this.cascadeDataGroup = Object.assign({}, this.cascadeDataGroup);
                }
            }
        },
        methods: {
            changeCascadeSelection(colIndex) {
                let names = this.cascadeColMeta[this.catalog];
                if (names && names.length > 0 && colIndex < names.length - 1) {
                    let changeValue = this.filter[colIndex];
                    if (changeValue !== null) {
                        this.cascadeDataGroup[colIndex + 1] = this.getCascadeValues({
                            catalog: this.catalog,
                            value: changeValue
                        });
                        this.cascadeDataGroup = Object.assign({}, this.cascadeDataGroup);
                    }
                    for (let i = colIndex + 1; i < names.length; i++) {
                        this.filter[i] = null;
                    }
                }
                // refresh current selection
                this.filter = Object.assign({}, this.filter);
                // chosen cascadeFilters
                let cascadeFilters = [];
                Object.keys(this.filter).forEach(index => {
                    cascadeFilters.push({
                        name: this.cascadeColMeta[this.catalog][index],
                        value: this.filter[index]
                    });
                });

                this.$store.commit('setCascadeFilters', cascadeFilters);
                this.$store.commit('doFilterData');
            },
            // removeFilter() {
            // this.$store.dispatch('removeFilter', this.filter.name).then(() => {
            //     this.conditionChange();
            // });
            // },
            conditionChange() {
                this.$store.commit('doFilterData');
            }
        },

    }
</script>

<style scoped>
    .filter-condition {

    }

    .filter-condition .label {
        font-size: 14px;
        color: #333333;
        margin-right: 4px;
        margin-left: 8px;
    }

    .filter-condition .value {
        margin: 0 10px;
    }

    .filter-condition .close {
    }
</style>